  *{
     margin: 0px;
     padding: 0px;
     box-sizing:border-box;
   }
    body{
       width: 100%;
       height: auto;
       font-size: 14px;
       color: #fff;

    }
    ul{
  list-style-type: none;
}
    a{
      text-decoration: none;
      color: #fff;
    }
    .header{
       height: 115px;
       width: 100%;
    }
    .header_left{
       height: 115px;
       width: 20%;
       float: left;
       background: #ccc;
    }
    .logo{
      height: 100%;
      width: 100%;
    }
    .header_right{
       height: 113px;
       width:80%;
       float: left;
       border-bottom: 3px solid #fff;
    }
    .header_right ul{

       height: 113px;
       width: 100%;
    }
    .header_right li{
        height: 100%;
        width:16.66%;
        float: left;
        position: relative;
    }
    .header_right li a{
        display: block;
        text-align: center;
        line-height: 114px;
        position: relative;
        font-size: 15px;
        font-weight: 700;
        background: rgb(5, 166, 179);
        border-left: 2px ridge rgba(98, 201, 209, 0.298);
        transform:translateZ(2px);
        transition-duration:0.5s;
        transition-property:color;

    }
     .header_right li a:before{
        content: "";
        bottom: 0px;
        left: 0;
        position: absolute;      
        top: 0;
        right: 0px;        
        background:none repeat scroll 0 0 #0bc2d1;
        z-index: -1;
        transform:scaleY(0);
        transform-origin:50% 100%;
        transition-duration:0.3s;
        transition-property:transform;
        transition-timing-function:ease-out;
     }
     .header_right li a:hover:before{
        transform:scaleY(1);
        transform-origin:50% 100%;
     }